<html>
    <head>
        <title>Vue是如何追中变化的</title>
    </head>
    <body>
        <script>
             //一、如何追踪变化
                            /*
                                Object.defineProperty 
                                        Object.defineProperty 是JavaScript内置的方法，是 ES5中不可shim的。
                                        它由浏览器或其他JavaScript运行时环境(如Node.js)提供。

                                    作用： 用于直接操作对象的属性，允许开发者定义或修改对象的自有属性，并且能可以设置改属性的特性。

                                           是Vue2.x中实现响应式数据绑定的核心方法之一。

                                           它用于直接操作对象的属性，可以定义或修改事情的自有属性，并且可以设置改属性的特性（如是否可枚举、是否可配置等等）
                                           在Vue的响应式系统中，Object.defineProperty 主要用于拦截对于对象属性的"读取" 和 "设置" 操作。
                            */
                            /*
                                当你把一个普通的JavaScript对象传入Vue实例作为 data 选项，
                                Vue 将遍历此对象所有的 property,并使用 Object.defineProperty 把这些 propety 全部转为 getter / setter.
                                这些 getter/setter 对于用户来说是不可见的，但是在内部他们让Vue能够追踪依赖，在 property被访问和修改时同时变更。

                                这里需要注意的是不同浏览器在控制台打印数据对象时，对 getter/setter 的格式化并不同，
                                所以建议安装 vue-devtools来获取对检查数据更加友好的用户界面。

                                每个组件实例都对应一个 watcher 实例，他会在组件渲染过程中把"接触"过的数据property记录为依赖。
                                之后当依赖的setter被触发时，会通知watcher ，从而使它关联的组件重新渲染。
                                （每个vue实例内部都有一个watcher,会把组件渲染时接触过的数据property记录为依赖。）
                            */
        </script>
    </body>
</html>